<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ登录与注册。</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url('https://qzonestyle.gtimg.cn/qzone/qzactStatics/imgs/20210812143212/7b7f7a5b3b3e3b3e.png');
            background-size: cover;
            background-position: center;
        }
        
        .container {
            width: 380px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }
        
        .header {
            background-color: #12B7F5;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            position: relative;
        }
        
        .header .tab {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .header .tab-btn {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 16px;
            padding: 5px 15px;
            cursor: pointer;
            outline: none;
        }
        
        .header .tab-btn.active {
            color: white;
            font-weight: bold;
        }
        
        .content {
            padding: 30px;
        }
        
        .form-page {
            display: none;
        }
        
        .form-page.active {
            display: block;
        }
        
        .input-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .input-group input:focus {
            border-color: #12B7F5;
        }
        
        .input-group label {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #999;
            font-size: 14px;
            transition: all 0.3s;
            pointer-events: none;
        }
        
        .input-group input:focus + label,
        .input-group input:valid + label {
            top: -8px;
            left: 10px;
            font-size: 12px;
            background-color: white;
            padding: 0 5px;
            color: #12B7F5;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
            color: #666;
        }
        
        .remember-me input {
            margin-right: 8px;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            background-color: #12B7F5;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #0E9DDB;
        }
        
        .other-options {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            color: #999;
        }
        
        .other-options a {
            color: #12B7F5;
            text-decoration: none;
            margin: 0 5px;
        }
        
        .other-options a:hover {
            text-decoration: underline;
        }
        
        .footer {
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            color: #999;
        }
        
        .qq-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 10px;
            display: block;
        }
        
        .error-message {
            color: #f44336;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .captcha-group {
            display: flex;
            margin-bottom: 20px;
        }
        
        .captcha-group input {
            flex: 1;
            margin-right: 10px;
        }
        
        .captcha-img {
            width: 100px;
            height: 40px;
            background-color: #eee;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            color: #666;
        }
        
        /* 头像上传样式 */
        .avatar-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #eee;
            margin-bottom: 10px;
            overflow: hidden;
            position: relative;
            border: 2px solid #12B7F5;
        }
        
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }
        
        .avatar-preview .default-avatar {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }
        
        .avatar-upload-btn {
            background-color: #f0f0f0;
            color: #666;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .avatar-upload-btn:hover {
            background-color: #e0e0e0;
        }
        
        .avatar-file-input {
            display: none;
        }
        
        .avatar-upload-tip {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="">
            QQ账号
            <div class="tab">
                <button class="tab-btn active" data-tab="login">登录</button>
                <button class="tab-btn" data-tab="register">注册</button>
            </div>
        </div>
        
        <div class="content">
            <!-- 登录表单 -->
            <div id="login-form" class="form-page active">
                <form action="login.do" method="POST" id="loginForm" >
                    <div class="input-group">
                        <input type="text" id="login-username" name="account" required>
                        <label for="login-username">QQ号码/手机/邮箱</label>
                        <div class="error-message" id="login-username-error"></div>
                    </div>
                    <div class="input-group">
                        <input type="password" id="login-password" name="password" required>
                        <label for="login-password">密码</label>
                        <div class="error-message" id="login-password-error"></div>
                    </div>
                    <div class="remember-me">
                        <input type="checkbox" id="remember">
                        <label for="remember">记住密码</label>
                    </div>
                    <button type="submit" class="btn">登录</button>
                </form>
                <div class="other-options">
                    <a href="#" id="forgot-password">忘记密码？</a> | 
                    <a href="#" id="switch-to-register">注册新账号</a>
                </div>
                <div class="footer">
                    安全登录，防止盗号
                </div>
            </div>
            
            <!-- 注册表单 -->
            <div id="register-form" class="form-page">
                <form action="register.do" method="POST" enctype="multipart/form-data" id="registerForm" >
                    <!-- 头像上传区域 -->
                    <div class="avatar-upload">
                        <div class="avatar-preview">
                            <div class="default-avatar">点击上传头像</div>
                            <img id="avatar-preview-img" src="#" alt="头像预览">
                        </div>
                        <input type="file" id="avatar-file" class="avatar-file-input" accept="image/*" name="headImg">
                        <button type="button" class="avatar-upload-btn" id="avatar-upload-btn">选择头像</button>
                        <div class="avatar-upload-tip">支持JPG、PNG格式，大小不超过2MB</div>
                    </div>
                    
                    <div class="input-group">
                        <input type="text" id="register-username" name="account" required>
                        <label for="register-username">QQ号码</label>
                        <div class="error-message" id="register-username-error"></div>
                    </div>
                    <div class="input-group">
                        <input type="password" id="register-password" name="password" required>
                        <label for="register-password">密码</label>
                        <div class="error-message" id="register-password-error"></div>
                    </div>
                    <div class="input-group">
                        <input type="password" id="register-confirm-password" name="repassword"required>
                        <label for="register-confirm-password">确认密码</label>
                        <div class="error-message" id="register-confirm-password-error"></div>
                    </div>
                    <div class="input-group">
                        <input type="text" id="register-nickname" name="nickName"required>
                        <label for="register-nickname">昵称</label>
                        <div class="error-message" id="register-nickname-error"></div>
                    </div>
                    <div class="captcha-group">
                        <input type="text" id="register-captcha" placeholder="验证码" required>
                        <div class="captcha-img" id="captcha-img">点击刷新</div>
                    </div>
                    <div class="error-message" id="register-captcha-error"></div>
                    <button type="submit" class="btn">立即注册</button>
                </form>
                <div class="other-options">
                    已有账号？<a href="#" id="switch-to-login">立即登录</a>
                </div>
                <div class="footer">
                    注册即表示同意<a href="#">QQ用户协议</a>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script>
        $(document).ready(function() {
            // 切换登录/注册标签
            $('.tab-btn').click(function() {
            	//alert(1)
                const tab = $(this).data('tab');
                $('.tab-btn').removeClass('active');
                $(this).addClass('active');
                $('.form-page').removeClass('active');
                $(`#${"${tab}"}-form`).addClass('active');
            });
            
            // 切换注册链接
            $('#switch-to-register').click(function(e) {
                e.preventDefault();
                $('.tab-btn').removeClass('active');
                $('[data-tab="register"]').addClass('active');
                $('.form-page').removeClass('active');
                $('#register-form').addClass('active');
            });
            
            // 切换登录链接
            $('#switch-to-login').click(function(e) {
                e.preventDefault();
                $('.tab-btn').removeClass('active');
                $('[data-tab="login"]').addClass('active');
                $('.form-page').removeClass('active');
                $('#login-form').addClass('active');
            });
            
           
            
            // 头像上传处理
            $('#avatar-upload-btn').click(function() {
                $('#avatar-file').click();
            });
            
            $('.avatar-preview').click(function() {
                $('#avatar-file').click();
            });
            
            $('#avatar-file').change(function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // 验证文件类型和大小
                const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
                //const maxSize = 2 * 1024 * 1024; // 2MB
                
                if (!validTypes.includes(file.type)) {
                    alert('请上传JPG、PNG或GIF格式的图片');
                    return;
                }
                
                /* if (file.size > maxSize) {
                    alert('图片大小不能超过2MB');
                    return;
                } */
                
                // 预览图片
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#avatar-preview-img').attr('src', e.target.result).show();
                    $('.default-avatar').hide();
                }
                reader.readAsDataURL(file);
            	
            });
            
           
             
            // 验证码点击刷新
            $('#captcha-img').click(function() {
                // 这里应该请求新的验证码，这里只是模拟
                $(this).text(Math.floor(Math.random() * 9000 + 1000));
            }).trigger('click');
            
            // 检查是否有记住的账号
            const rememberedUsername = localStorage.getItem('rememberedUsername');
            if (rememberedUsername) {
                $('#login-username').val(rememberedUsername);
                $('#remember').prop('checked', true);
            }
            
            // 输入框动画效果
            $('input').each(function() {
                if ($(this).val() !== '') {
                    $(this).next('label').css({
                        'top': '-8px',
                        'left': '10px',
                        'font-size': '12px',
                        'background-color': 'white',
                        'padding': '0 5px',
                        'color': '#12B7F5'
                    });
                }
            });
        });
    </script>
</body>
</html>